import {patch} from "./snabbdom/patch";
import {h} from './snabbdom/h';

let container = document.querySelector('#container');
let my_dian = document.querySelector("#dian");



// let obj = h('div',{},'123');
// let obj = h('div',{key:1},[
//   h('ul',{style:{width:'20px',background:'red'}, className:"my"},[
//     h('li',{key:1},1),
//     h('li',{key:2},2),
//     h('li',{key:3},3),
//     h('li',{key:4},4),
//   ]),
// ]);
let my_obj,obj2,obj3;
let obj = h('div',{key:3},[
    h('li',{key:1},1),
    22288888,
    h('li',{key:2},[
      h('div',{key:8},8),
      '这会一段文字3',
      h('div',{key:9},9),
      '这会一段文字2',
      h('div',{key:10},10)
    ]),
    h('li',{key:3},3),
    h('li',{key:4},4)
]);
my_obj = patch(container,obj)

my_dian.addEventListener('click',()=>{
  if(obj3){
    let obj4 = h('div',{key:2},[
      h('ul',{style:{width:'30px',background:'red'}},[
        h('li',{key:1},1),
        h('li',{key:2},2),
        h('li',{key:3},3),
        h('li',{key:4},4),
        h('li',{key:5},7),
      ]),
    ]);
    my_obj = patch(my_obj,obj4)
    return ;
  }
  if(obj2){
    obj3 = h('div',{key:2},[
      h('ul',{style:{width:'20px',background:'red'}},[
        h('li',{key:1},1),
        h('li',{key:2},2),
        h('li',{key:3},3),
        h('li',{key:4},4),
        h('li',{key:5},6),
      ]),
    ]);
    my_obj = patch(my_obj,obj3)
    return ;
  }
  // obj2= h('div',{key:3},[
  //   h('ul',{style:{width:'20px',background:'red'}},[
  //     h('li',{key:1},1),
  //     h('li',{key:2},2),
  //     h('li',{key:3},3),
  //     h('li',{key:4},4),
  //     h('li',{key:5},5),
  //   ]),
  // ]);
  var time1 = new Date().getTime();
  obj2= h('div',{key:3},[
      h('li',{key:1,style:{color:'blue'},className:'aha',id:'my','data-value':123, on:{'click':(e)=>{console.log(9999999);e.target.style.color="red"}}},1),
      
      h('li',{key:7},777),
      h('li',{key:4},4),
      h('li',{key:5},5),
      h('li',{key:2},[
        '这是新增的文字',
        h('div',{key:9},9),
        h('div',{key:10},10),
        h('div',{key:8},8)
      ])
  ]);
  my_obj = patch(my_obj,obj2)
  var time2 = new Date().getTime();
  console.log(time2 - time1);
})